<template>
  <div>
    <van-row>
      <!-- 底部标签栏 匹配router使用-->
      <van-tabbar v-model="active">
        <van-tabbar-item replace to="/home" icon="wap-home">首页</van-tabbar-item>
        <van-tabbar-item replace to="/category" icon="wap-nav">分类</van-tabbar-item>
        <van-tabbar-item replace to="/message" icon="chat-o" :badge="user.countMessage">消息</van-tabbar-item>
        <van-tabbar-item replace to="/cart" icon="cart-o" :badge="user.countCart">购物车</van-tabbar-item>
        <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </van-row>
  </div>
</template>

<script>
export default {
  name: "footerTabbar",
  data() {
    return {
      active: 0,
      user: {
        countMessage: '5',
        countCart: '4'
      }
    }
  },
  created() {
    this.axios.get('http://localhost:9090/footerTabber').then((response) => {
      this.user = response.data
    })
  }
}
</script>

<style scoped>

</style>